<template>
  <view class="content">
    <view class="title_box">
      <text class="green_ornament"></text>
      <text>待接单实验任务</text>
    </view>
    <view class="li_box">
      <view class="li_content">
        <view class="li_label">需求编号</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验员</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验助手</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验对象</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验类别</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验阶段</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
    </view>
    <view class="btn_box">
      <view class="red_btn">删除任务</view>
      <view class="green_btn">编辑任务</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      styles: {
        borderColor: "#1a512c",
      },
      show: false,
      checkboxValue1: [],
      // 基本案列数据
      checkboxList1: [
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
        {
          name: "挥发性固体含量VS",
          disabled: false,
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.pop_box {
  width: 600rpx;
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  border-radius: 10rpx;
  color: #1a512c;
  font-weight: 700;
  .pop_title {
    margin-bottom: 20rpx;
  }
  .pop_btn_box {
    margin-top: 40rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back_btn {
      width: 200rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      background-color: #fff;
      color: #1a512c;
      font-weight: 700;
      border: #1a512c 2rpx solid;
    }
    .submit_btn {
      background-color: #1a512c;
      color: #fff;
    }
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;
  .title_box {
    display: flex;
    align-items: center;
    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }
  .li_box {
    margin-top: 20rpx;
  }
}
.li_content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .li_label {
    font-weight: 700;
    margin-right: 30rpx;
    width: 20%;
  }
  .li_input {
    width: 80%;
    .border_input {
      border: 2rpx solid #1a512c;
      border-radius: 10rpx;
      height: 50rpx;
      width: 100%;
    }
  }
}
.textarea_border {
  margin-top: 20rpx !important;
  height: 200rpx !important;
}
.btn_box {
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  width: 100%;
  height: 100rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .red_btn {
    background-color: #d93434;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
  .green_btn {
    background-color: #1b9c46;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
}
</style>
